<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 22  11 444 22 33 55
      // 执行上下文：this  变量
      // 整个script标签就是一个匿名函数的调用
      // 函数调用：  压栈
      // var num = 11
      // function fn() {
      //   var num2 = 22
      //   console.log(num2)  // 22
      // }
      // // 压栈
      // fn()
      // console.log(num) // 11

      // function fn2() {
      //   fn()
      //   console.log('3333')
      // }
      // console.log('444')  // 444
      // fn2()
      // console.log('5555')

      // function getSum(n) {
      //   if (n === 1) {
      //     return 1
      //   }
      //   return getSum(n - 1) + n
      // }
      // console.log(getSum(10))

      // console.log(1)

      // setTimeout(() => {
      //   console.log(2)
      // }, 0)

      // setInterval(() => {
      //   console.log(4)
      // }, 1000)

      // document.querySelector('div').onclick = function () {
      //   console.log(5)
      // }

      // console.log(3)

      // 封装ajax函数
      function ajax(url, callback) {
        const xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.send(null)

        // 等ajax请求结束 异步
        xhr.onload = function () {
          callback(JSON.parse(xhr.responseText))
        }
      }
      let res = {}
      ajax('http://geek.itheima.net/v1_0/channels', (data) => {
        res = data
        console.log(res)
      })

      // 封装的代码如果带有异步，必须涉及到回调
      // 封装一个函数，3秒后返回一个随机数
      function randomAsync(callback) {
        setTimeout(() => {
          const num = Math.random()
          callback(num)
        }, 3000)
      }

      randomAsync((num) => {
        console.log(num)
      })
    </script>
  </body>
</html>
